[PC-1413] 바뀐 onboarding 적용 #176

comst19 · 2025-11-25T15:47:25Z

1. ⭐️ 변경된 내용

onboarding 디자인 적용
컴포넌트 화

2. 🖼️ 스크린샷(선택)

mp4.mp4

3. 💡 알게된 부분

4. 📌 이 부분은 꼭 봐주세요!

lottie 애니메이션 99% 적용 관련

- 스크롤 제거 - title fade in&out - 화면 전환 애니메메이션 제거

tgyuuAn

민수님 고생하셨씁니닷 ~~~~~!!!
제가 코멘트 단 부분만 한번 봐주시고 머지해주셔도 될 것 같아요~!

tgyuuAn · 2025-11-26T11:25:59Z

feature/onboarding/src/main/java/com/puzzle/onboarding/model/OnboardingData.kt

+data class OnboardingPageData(
+    val screenName: String,
+    @param:StringRes val titleRes: Int,
+    @param:StringRes val buttonLabelRes: Int?,
+    val contentType: PageContentType
+)
+
+sealed class PageContentType {
+    data class Lottie(
+        @param:RawRes val lottieRes: Int,
+    ) : PageContentType()
+
+    data class Image(
+        @param:DrawableRes val imageRes: Int
+    ) : PageContentType()
+}


@immutable 처리 해주면 좋을 것 같아요

stable 할 거 같은데 붙이는 이유가 가독성 일까요? 수정했습니다~
95a423f

모바일로 리뷰하느라 sealed interface인줄 알었네요 sealed class 였고 다 stable이면 굳이 안써도 돼요~~!

tgyuuAn · 2025-11-26T11:29:40Z

feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt

+    LaunchedEffect(animProgress, shouldPlay) {
+        if (shouldPlay) {
+            isStopped = false
+        }
+
+        if (!isStopped && animProgress >= targetProgress) {
+            isStopped = true
+            stoppedProgress = targetProgress
+        }
+    }


이거 AnimProgress가 LaunchedEffect 키로 들어가면 계속 호출될텐데 맞을까요?
animProgress >= targetProgress가 목적이라면 DerivedState를 사용하는게 더 적절할 수도 있을 것 같아요.

네, 확인해보니 animProgress 때문에 불필요하게 호출되네요! 수정했습니다.
4f60d56

AnimateXXX는 내부에 state처리가 stable하게 되어있어요. 원래대로 by 쓰시면 될듯해요

그리고 dereivedState 쓰는데 smapshotFlow 필요있나요?

launchedEffect만으로 충분할 것 같긴한데..

SnapshotFlow쓰실거라면 distictUntilChanged로도 해결하실 수 있을 거에요

수정 했습니다~
갑자기 compare 안 되길래 by 제거했었는데 안스 버그였네요..

5bf689a

tgyuuAn · 2025-11-26T11:30:22Z

feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt

+        }
+    }
+
+    val finalProgress = if (isStopped) stoppedProgress else animProgress


Animation이 언제 정지되는 지 궁금해요~

animProgress == targetProgress 시점에 isStopped가 true가 됩니다. 아래의 로직에 의해서 finalProgress가 고정됩니다.

if (isStopped) stoppedProgress else animProgress

targetProgress가 1f가 아닐때가 있나요?? 다 고정값을 사용하는 것 같은데, 파라미터로 받는 이유와 그로인해 정지처리를 해야하는 이유가 궁금해요.

이번에 받은 Lottie 파일들은 약 99.3% 시점 이후 투명 프레임이 삽입되는 거 같습니다.
요구사항상 애니메이션은 한 번만 재생인데, 이로 인해 1회 재생 종료 후 화면이 비어버리는 문제가 생겼습니다.

디자이너님과 논의한 결과, Lottie 파일을 만들 때마다 마지막 프레임이 투명으로 삽입되어 시간을 너무 많이 사용해서 현재 lottie 애니메이션 종료 직전(약 99%)에서 멈추도록 정했습니다.

파라미터로 처리한 이유는, 특수한 상황이기 때문에 추후 필요에 따라 끝까지 재생하거나 다른 위치에서 멈추는 동작으로 변경될 수 있다고 생각했습니다.

lottie 애니메이션 99% 적용 관련

이거 짜피 로띠파일 이슈 해결되면 0.99 상수값 박고있는 파라미터를 1f로 바꾼다던가 1f가 됨으로써 필요없어질 수 있을 것 같아서 그 때 코드를 또 수정 할 수 있을 것 같은데,
코드 복잡도 올리는 것 보다 그냥 지워도 될 것 같은데 어떻게 생각하시나요?

맥락없는 사람이 보면 복잡해보이긴 하네요

그렇긴 하겠네요, 파라미터 지우고 고정 값으로 가고 lottie 해결되면 로직까지 지우는 방향으로 가겠습니다! 개인적으로는 로직 없애는 게 더 쉬울 거 같아서 lottie 이슈가 확실히 해결되면 lottie 파일 수정하면서 같이 하면 좋을 거 같습니다

778059a

tgyuuAn · 2025-11-26T11:32:45Z

feature/onboarding/src/main/java/com/puzzle/onboarding/model/OnboardingData.kt

+data class OnboardingPageData(
+    val screenName: String,
+    @param:StringRes val titleRes: Int,
+    @param:StringRes val buttonLabelRes: Int?,
+    val contentType: PageContentType
+)
+
+sealed class PageContentType {
+    data class Lottie(
+        @param:RawRes val lottieRes: Int,
+    ) : PageContentType()
+
+    data class Image(
+        @param:DrawableRes val imageRes: Int
+    ) : PageContentType()
+}


온보딩 화면이 5개로 늘어나면서 추상화 + 코드 재사용을 하신거군요 👍👍👍

tgyuuAn · 2025-11-26T11:33:10Z

feature/onboarding/src/main/java/com/puzzle/onboarding/model/OnboardingData.kt

+class OnboardingPageProvider : PreviewParameterProvider<OnboardingPageData> {
+    override val values: Sequence<OnboardingPageData> = onboardingPages.asSequence()
+}


Preview 밑에 두면 더 가독성이 올라갈 것 같아요

tgyuuAn · 2025-11-26T11:37:36Z

feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt

+@Composable
+internal fun StopAtProgressLottie(
+    @RawRes lottieRes: Int,
+    targetProgress: Float = 1.0f,
+    shouldPlay: Boolean,
+    modifier: Modifier = Modifier
+) {


Modifier는 require 파라미터 하단부에, optional 파라미터 상단부에 있는게 컴포즈 권장 컨벤션이에요~!

참고 링크

optional 파라미터에 대해선 몰랐네요.. 감사합니다~
0a205b2

- lottie 이슈 해결되면 해당 로직 삭제 필요

* [PC-1413] lottie 의존성 추가 * [PC-1413] 바뀐 onboarding에 필요한 리소스 파일 추가 * [PC-1413] 바뀐 onboarding에 필요한 string 리소스 추가 * [PC-1413] 바뀐 OnboardingPageData, PageContentType * [PC-1413] StopAtProgressLottie 구현 * [PC-1413] PageContent 구현 * [PC-1413] 바뀐 onboarding ui 적용 - 스크롤 제거 - title fade in&out - 화면 전환 애니메메이션 제거 * [PC-1413] onboarding statusbar 색 변경 * [PC-1413] onboarding model에 @immutable 추가 * [PC-1413] StopAtProgressLottie 정지 로직 최적화 (derivedStateOf, snapshotFlow) * [PC-1413] OnboardingPageProvider 위치 이동하여 가독성 추가 * [PC-1413] 컴포즈 컴벤션에 맞게 파라미터 순서 수정 * [PC-1413] StopAtProgressLottie 로직 최적화 * [PC-1413] StopAtProgressLottie의 파라미터 targetProgress 제거 - lottie 이슈 해결되면 해당 로직 삭제 필요

comst19 added 8 commits November 26, 2025 00:25

[PC-1413] lottie 의존성 추가

27b7990

[PC-1413] 바뀐 onboarding에 필요한 리소스 파일 추가

f456c9b

[PC-1413] 바뀐 onboarding에 필요한 string 리소스 추가

08f6fc1

[PC-1413] 바뀐 OnboardingPageData, PageContentType

de5b977

[PC-1413] StopAtProgressLottie 구현

b1c047f

[PC-1413] PageContent 구현

7c96872

[PC-1413] 바뀐 onboarding ui 적용

fadd37e

- 스크롤 제거 - title fade in&out - 화면 전환 애니메메이션 제거

[PC-1413] onboarding statusbar 색 변경

a9956cb

comst19 requested review from kkh725 and tgyuuAn November 25, 2025 15:47

comst19 self-assigned this Nov 25, 2025

comst19 added 리뷰 원해요🔥 피어의 리뷰를 기다리는 ing.. 🔥 ㅁㅅ민수 labels Nov 25, 2025

tgyuuAn approved these changes Nov 26, 2025

View reviewed changes

tgyuuAn added 머지 해도될듯염🌟 현재 코드를 기존 코드에 합쳐도 될 것 같다라고 판단..! 🌟 and removed 리뷰 원해요🔥 피어의 리뷰를 기다리는 ing.. 🔥 labels Nov 26, 2025

comst19 added 4 commits November 26, 2025 21:35

[PC-1413] onboarding model에 @immutable 추가

95a423f

[PC-1413] StopAtProgressLottie 정지 로직 최적화 (derivedStateOf, snapshotFlow)

4f60d56

[PC-1413] OnboardingPageProvider 위치 이동하여 가독성 추가

7711e90

[PC-1413] 컴포즈 컴벤션에 맞게 파라미터 순서 수정

0a205b2

comst19 force-pushed the feature/PC-1413 branch from 7853e4c to 0a205b2 Compare November 26, 2025 18:20

[PC-1413] StopAtProgressLottie 로직 최적화

5bf689a

kkh725 approved these changes Nov 27, 2025

View reviewed changes

[PC-1413] StopAtProgressLottie의 파라미터 targetProgress 제거

778059a

- lottie 이슈 해결되면 해당 로직 삭제 필요

comst19 merged commit ea22c14 into develop Nov 27, 2025
1 check passed

comst19 deleted the feature/PC-1413 branch November 27, 2025 12:19

[PC-1413] 바뀐 onboarding 적용 #176

[PC-1413] 바뀐 onboarding 적용 #176

Uh oh!

Conversation

comst19 commented Nov 25, 2025

1. ⭐️ 변경된 내용

2. 🖼️ 스크린샷(선택)

3. 💡 알게된 부분

4. 📌 이 부분은 꼭 봐주세요!

Uh oh!

tgyuuAn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tgyuuAn Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

comst19 Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tgyuuAn Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

comst19 Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tgyuuAn Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

comst19 Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tgyuuAn Nov 26, 2025 •

edited

Loading

comst19 Nov 26, 2025 •

edited

Loading

tgyuuAn Nov 26, 2025 •

edited

Loading

comst19 Nov 26, 2025 •

edited

Loading

tgyuuAn Nov 26, 2025 •

edited

Loading

comst19 Nov 27, 2025 •

edited

Loading